<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	<script src="../layui/layui.js"></script>
	<script type="text/javascript">
		//layui基本用法先声明组件，后使用
		layui.use([ 'layer', 'form', 'jquery', 'table' ], function() {
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.jquery;
			var table = layui.table;

			table.render({
				elem : '#dg',
				url : '../category/listPage',
				page : true,
				id : 'cgtable',
				cols : [ [ //表头
				{
					field : 'cid',
					title : 'ID',
					width : 80,
					checkbox : true
				}, {
					field : 'cname',
					title : '类别名称',
				}, {
					fixed : 'right',
					align : 'center',
					title : '操作',
					width : 80,
					toolbar : '#barDemo'
				} ] ]
			});

			// 			//监听头工具栏事件
			// 			table.on('toolbar(test)', function(obj) {
			// 				var checkStatus = table.checkStatus(obj.config.id);
			// 				var data = checkStatus.data; //获取选中的数据
			// 				switch (obj.event) {
			// 				case 'add':
			// 					layer.msg('添加');
			// 					break;
			// 				case 'update':
			// 					if (data.length === 0) {
			// 						layer.msg('请选择一行');
			// 					} else if (data.length > 1) {
			// 						layer.msg('只能同时编辑一个');
			// 					} else {
			// 						layer.alert('编辑 [id]：' + checkStatus.data[0].id);
			// 					}
			// 					break;
			// 				case 'delete':
			// 					if (data.length === 0) {
			// 						layer.msg('请选择一行');
			// 					} else {
			// 						layer.msg('删除');
			// 					}
			// 					break;
			// 				}
			// 				;
			// 			});

			//监听行工具事件
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据 //获得 lay-event 对应的值
				if (obj.event === 'edit') {
					layer.open({
						title : '编辑',
						content : $('#edit-category-dialog').html(),
						type : 1,
					});

					//填充表单
					form.val("edit-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						'cname' : data.cname,
						'cid' : data.cid
					})

					form.on('submit(edit-submit)', function(data) {
						$.post('../category/update', data.field,
								function(flag) {
									if (flag) {
										table.reload('cgtable', {});
										layer.msg("修改成功");
										layer.closeAll('page');
									} else {
										layer.msg("修改失败");
									}
								})
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				}
			})

			//添加
			$("#add-but").click(function() {
				layer.open({
					title : '保存',
					content : $('#add-category-dialog').html(),
					type : 1

				});

				form.on('submit(save-submit)', function(data) {
					$.post('../category/insert', data.field, function(flag) {
					
						if (flag) {
							
							table.reload('cgtable', {});//刷新表格
							layer.msg("添加成功");
						    layer.closeAll('page');
						} else {
							layer.msg("添加失败");
						}
					})
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});

			});

			//删除表单
			$("#remove-but").click(function() {
				var checkStatus = table.checkStatus('cgtable');
				var cids = [];
				for ( let i in checkStatus.data) {
					cids.push(checkStatus.data[i].cid);
				}
				console.log(cids);
				$.post('../category/delete', {
					'cids' : cids
				}, function(flag) {
					if (flag) {
						table.reload('cgtable', {});
						layer.msg("删除成功");
					} else {
						layer.msg("删除失败");
					}
				});
			});

			$('#search-but').click(function() {
				var demoReload = $('#demoReload');
				//执行重载
				table.reload('cgtable', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						cname : demoReload.val()
					}
				}, 'data');
			})

		});
	</script>



	<div class="demoTable">
		搜索：
		<div class="layui-inline">
			<input name="id" class="layui-input" id="demoReload" autocomplete="off" />
		</div>
		<button id="search-but" class="layui-btn">
			<i class="layui-icon">&#xe615;</i>搜索
		</button>
		<button id="add-but" class="layui-btn">
			<i class="layui-icon">&#xe654;</i>添加
		</button>
		<button id="remove-but" class="layui-btn">
			<i class="layui-icon">&#xe640;</i>删除
		</button>
	</div>


	<table id="dg" lay-filter="test"></table>

	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
           <i class="layui-icon">&#xe642;</i>
                   编辑
        </a>
	</script>

	<script type="text/html" id="add-category-dialog">
		<form class="layui-form" method="post">
		<div class="layui-form-item">
		<label class="layui-form-label">类别名称</label>
		<div class="layui-input-inline">
		<input type="text" name="cname" required lay-verify="required"
					placeholder="请输入类别名称" class="layui-input">
		</div>
		</div>
		
		<div class="layui-form-item">
		<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="save-submit">保存</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
		</div>
		</form>
	</script>

	<script type="text/html" id="edit-category-dialog">
		<form class="layui-form" method="post" lay-filter="edit-form">
		<div class="layui-form-item">
		<label class="layui-form-label">类别名称</label>
		<div class="layui-input-inline">
		<input type="text" name="cname" required lay-verify="required"
					placeholder="请输入类别名称" class="layui-input">
		<input type="hidden" name="cid" />
		</div>
		</div>
		
		<div class="layui-form-item">
		<div class="layui-input-block">
		<button class="layui-btn" lay-submit lay-filter="edit-submit">保存</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
		</div>
		</form>
	</script>



</body>
</html>